<template>
  <div class="mask">
    <ul v-if="!flag">
      <li @click.stop="isShow" v-for="(v, i) in arr" :key="i">
        {{ v }}
      </li>
    </ul>
    <transition name="fade">
      <div :style="{ backgroundColor: $store.state.color }" v-if="flag" class="minMask">
        <li
          @click.stop="$store.commit('colorChange', v)"
          v-for="(v, i) in color"
          :key="i"
        >
          <p :style="{ backgroundColor: v }" class="p"></p>
          <span> {{ v }}</span>
        </li>
      </div>
    </transition>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props, { emit }) {
    let arr = ref(["切换主题", "下载数据", "导入数据", "编辑数据", "清空数据"]);
    // 标记
    let color = ref(["red", "blue", "skyblue", "orange", "#ccc"]);
    // 颜色
    let flag = ref(false);
    // 显示隐藏
    function isShow() {
      flag.value = true;
    }
    return { arr, isShow, flag, color };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
// 动画
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter-from, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(-100%);
}

.p {
  width: 20px;
  height: 20px;
  margin: 0 10px;
}
.minMask {
  width: 200px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  li {
    display: flex;
    align-items: center;
  }
}
.mask {
  width: 200px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.63);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  li {
    width: 90px;
    height: 40px;
    background-color: pink;
    border-radius: 6px;
    color: #fff;
    margin: 30px 0;
    line-height: 40px;
    text-align: center;
  }
}
</style>
